<template>
  <div class="wrapper">
    <p align="center">总共有{{ array.length }}个属性</p>
    <div v-for="(element,index) in array" :key="index">
      <span>{{ element.name }}</span>
      <span>{{ element.type }}</span>
    </div>
  </div>
</template>

<script setup>
// 导入 vue 模块中所有内容
import * as VueModel from 'vue';

const array = [];

Object.getOwnPropertyNames( VueModel ).forEach( name => {
    // 从 VueModel 中获取指定 name 对应的值
    let value = VueModel[ name ];
    let type = typeof value ;
    array.push( { name, type } );
});

</script>

<style scoped>
.wrapper {
    margin: 15px;
    border: 1px solid #dedede;
    box-shadow: 0 0 20px -10px blue;
}

.wrapper>div {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    border: 1px solid #aaa;
    line-height: 30px;
}

.wrapper div>span {
    flex-basis: 49%;
}

.wrapper div>span:first-child {
    text-align: right;
}
</style>